<template>
	<div class="Blacklist">
		<div class="Blacklist-body">
			<div class="items">
				<div class="item">
					<div class="check">
						<el-checkbox v-model="checkAllFlag" @change="checkAll()" ></el-checkbox>
					</div>
					<div class="name"></div>
					<div class="ming"></div>
					<!-- <div class="addTime b-no" ></div> -->
					<div class="edit">
						<el-button @click="addFlag()">添加黑名单</el-button>
						<el-button @click="deleteAll()" >删除黑名单</el-button>
					</div>
				</div>
				<div class="item" >
					<div class="check">
					</div>
					<div class="name">网站名称</div>
					<div class="ming">域名</div>
					<div class="edit">操作</div>
				</div>
				<div class="item" v-for="(item,index) in blacklist" :key="index">
					<div class="check">
						<el-checkbox v-model="item.check" @change="checkOne()"></el-checkbox>
					</div>
					<div class="name">{{item.website}}</div>
					<div class="ming">{{item.domain}}</div>
				
					<div class="edit"><el-button @click="editFlag(item)">编辑</el-button><el-button @click="deleteOne(item,index)">删除</el-button></div>
				</div>
			</div>
		</div>
		<el-dialog size="tiny" class="porpm" title="添加黑名单" v-model="dialogFormVisible">
		  <el-form :model="form">
		    <el-form-item maxlength="200px" label="网站名称" 
		    	:label-width="formLabelWidth"
		    	prop="website"
		    	:rules="[
			      { required: true, message: '请输入网站名称', trigger: 'blur' },
			    ]">
		      <el-input v-model="form.website" placeholder="请输入网站名称"></el-input>
		    </el-form-item>
		    <el-form-item label="网站域名" :label-width="formLabelWidth"
			    prop="domain"
		    :rules="[
			      { required: true, message: '请输入域名地址', trigger: 'blur' },
			      { validator: domainNmae, message: '请输入正确的域名', trigger: 'blur,change' }
			    ]"
		    >
		      <el-input v-model="form.domain" placeholder="请输入网站域名"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogFormVisible = false,addBlackList()">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>
<script>
	import subhead from 'components/common/subhead'	
	export default{
		name:'Blacklist',
		components:{subhead},
		data(){
			var domainNmae = (rule, value, callback) => {
				var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
				+ "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" //ftp的user@
				+ "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
				+ "|" // 允许IP和DOMAIN（域名）
				+ "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
				+ "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
				+ "[a-z]{2,6})" // first level domain- .com or .museum
				+ "(:[0-9]{1,4})?" // 端口- :80
				+ "((/?)|" // a slash isn't required if there is no file name
				+ "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
				var re=new RegExp(strRegex);
				if (re.test(value)){
					callback();
				}else{
					callback(new Error('域名不正确'));
				}
		      };
			return{
				checkAllFlag:false,
				dialogFormVisible: false,
				form:{
					website:'',
					domain:''
				},
				formLabelWidth:'120px',
				blacklist:[],
				edit:false,
				editId:'',
				domainNmae
			}
		},
		mounted(){
			this.getBlackList()
		},
		methods:{
			deleteAll() {
				if(this.blacklist.every(d=> !d.check)){
					this.$message.error("请选择数据")
					return
				}
				this.$confirm('此操作将永久删除该域名, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	for(let i=this.blacklist.length-1;i >=0;i--){
	          			let item = this.blacklist[i]
	          			if(item.check == true){
							this.$http.post('vrv-monitor-platform-web/blacklist/delete',{
					    		id:item.id
					    	}).then(res=>{
									let info=res.body.message
					    		if (res.body.success==true) {
					    			this.blacklist.splice(i,1);
					    			  this.$message({
							            type: 'success',
							            message: '删除成功!'
							          });
					    		}else if(res.body.success==false){
					    			  this.$message({
							            type: 'error',
							            message: info
							          });
									}
					    	})
	          			}
	          		}
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
				
		    },
		    //查询
		    async getBlackList(){
		    	let res = await this.$http.post('vrv-monitor-platform-web/blacklist/queryByOrgCode')
		    	let blacklist = res.body.data
		    	//添加选择属性
		    	blacklist.forEach((value,index)=>{
		    		value.check = false
		    	})
		    	this.blacklist = blacklist
		    },
		    
		    addBlackList(){
		    	if(this.edit ==true){
		    		//修改
		    		this.$http.post('vrv-monitor-platform-web/blacklist/update',{
			    		id:this.editId,
			    		website:this.form.website,
			    		domain:this.form.domain
			    	}).then((res)=>{
			    		if(res.body.success==true){
			    			this.blacklist.forEach((value,index)=>{
			    				if(value.id==this.editId){
			    					value.website = this.form.website
			    					value.domain = this.form.domain
			    				}
			    			})
			    			this.$message.success('修改成功')
			    		}else{
			    			this.$message.error(res.body.message)
			    		}
			    	})
		    	}else{
		    		// 添加黑名单
			    	this.$http.post('vrv-monitor-platform-web/blacklist/insert',{
			    		website:this.form.website.trim(),
			    		domain:this.form.domain.trim()
			    	}).then((res)=>{
			    		if(res.body.success==true){
			    			this.$message('添加成功')
			    			this.form.id = res.body.data
			    			this.blacklist.push(this.form)
			    			this.form={}
			    		}else{
			    			this.$message.error(res.body.message)
			    		}
			    	})
		    	}
		    },
		    // 编辑
		    editFlag(item){
		    	this.dialogFormVisible = true
		    	this.form.website= ''+item.website
		    	this.form.domain = ''+item.domain
		    	this.edit = true
		    	this.editId = item.id
		    },
		    addFlag(){
		    	this.dialogFormVisible = true
		    	this.form.website= ''
		    	this.form.domain = ''
		    	this.edit = false
		    },
		    // 全反选
		    checkAll(){
	    		this.blacklist.forEach((value,index)=>{
	    			value.check = this.checkAllFlag
	    		})	
		    },
		    checkOne(){
		    	if(this.checkAllFlag){
		    		this.checkAllFlag = false
		    	}
		    },
		    deleteOne(item,index){
		    	this.$confirm('请确定要删除这个网站吗？', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	this.$http.post('vrv-monitor-platform-web/blacklist/delete',{
				    		id:item.id
				    }).then((res)=>{
								let info=res.body.message
				    		if (res.body.success==true) {
				    			this.$message({
						            type: 'success',
						            message: '删除成功!',
						          });
				    			this.blacklist.splice(index,1)
				    		}else if(res.body.success==false){
				    			this.$message({
						            type: 'error',
						            message: info,
						          });										
								}
				    })
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });       
		        });
		    	
		    },
		}
	}
</script>
<style lang="stylus">
  .el-dialog__title 
    color #666666
    font-size 18px
    font-weight normal
  .el-form-item__label
    color #7d7d7d
  .bar
    width 15px
    height 3px
    background-color #898989
    margin 0 auto
    margin-top 16px
</style>
<style scoped>
	.Blacklist-body .item{
		border-bottom: 1px solid #dcdcdc;
		display: flex;
		height: 3.8rem;
		line-height: 3.8rem;
	}
	.Blacklist-body .item .check{
		width: 6.3rem;
		text-align: right;
	}
	.Blacklist-body .item .name,.Blacklist-body .item .ming,.Blacklist-body .item .addTime,.Blacklist-body .item .edit{
		flex:1;
		text-align: center;
		font-size: 0.88rem;
		color: #666;
	}
	.Blacklist-body .item .addTime{
		border-right: 1px solid #dcdcdc;
	}
	.Blacklist-body .item .edit button{
		width: 6.25rem;
		height: 2.2rem;
	}
	.b-no{
		border-right: 0 !important;
	}
	
</style>